<template>
  <div class="dashboard-container">
    <!-- 左侧菜单 -->
    <!-- 使用全局侧边菜单组件 -->
    <SideMenu
        :activeMenu="activeMenu"
        :menuItems="menuItems"
        headerIcon="@/assets/images/fk.png"
        title="基础数据"
        @menuClick="handleMenuClick"
    />

    <!-- 主要内容区 -->
    <div class="main-content">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script setup>
import {computed, markRaw, ref} from 'vue'
import Student from './components/Student.vue'
import Teacher from './components/Teacher.vue'
import {useMenuStore} from "@/stores/menuStore";
import Campus from "./components/Campus.vue";
import guardian from "./components/guardian.vue";


// 菜单项配置
const menuItems = [
  {key: 'Student', name: '学生管理', component: markRaw(Student), icon: new URL('@/assets/images/xs  ', import.meta.url).href},
  {key: 'Teacher', name: '教职工管理', component: markRaw(Teacher), icon: new URL('@/assets/images/jz', import.meta.url).href},
  {key: 'guardian', name: '监护人管理', component: markRaw(guardian), icon: new URL('@/assets/images/jh', import.meta.url).href},
  // {key: 'roommate', name: '同住人管理', component: null, icon: new URL('@/assets/images/fk.png', import.meta.url).href},
  {key: 'Campus', name: '校园信息', component:  markRaw(Campus), icon: new URL('@/assets/images/xx', import.meta.url).href}
]
const menuStore = useMenuStore();
// 当前激活的菜单
console.log(menuStore.activeMenuKey)
const activeMenu = ref(menuStore.activeMenuKey||'Student')

// 处理菜单点击
const handleMenuClick = (key) => {
  activeMenu.value = key
}

// 根据当前选中菜单显示对应组件
const currentComponent = computed(() => {
  const item = menuItems.find(item => item.key === activeMenu.value)
  return item?.component || null
})
</script>
<style scoped>
.dashboard-container {
  display: flex;
  min-height: 100%;
}

.main-content {
  width: 100%;
  padding-top: 0;
  background-color: #F4F9FF;
}

</style>
